<template>
	<contents
		:heightInclude="['tabBar']"
		class="store_home_com"
		:nullData="goodsList.length === 0"
	>
		<view class="stoer_top">
			<StoreInfo v-model="storeInfo" :domainPrefix="domainPrefix" />
			<HMfilterDropdown
				:filterData="filterData"
				:defaultSelected="defaultSelected"
				@confirm="confirm"
			></HMfilterDropdown>
		</view>

		<scroll-view
			scroll-y
			class="sort_bottom"
			@scrolltolower="onBottom"
			:lower-threshold="10"
			refresher-enabled
			refresher-background="#f7f4f8"
			:refresher-triggered="triggered"
			@refresherrefresh="onRefresh"
		>
			<u-gap height="8"></u-gap>
			<GoodsList v-model="goodsList" :type="4" :more="false" />
			<u-gap height="8"></u-gap>
		</scroll-view>
		<u-no-network></u-no-network>
	</contents>
</template>

<script>
import {
	getStoreInfo,
	getStoregoodList,
	getMenuFilterList
} from '@/api/http/store'
import StoreInfo from '@/components/storeInfo'
import GoodsList from '@/components/goodsList'
import HMfilterDropdown from '@/components/HM-filterDropdown/HM-filterDropdown.vue'
export default {
	components: {
		GoodsList,
		StoreInfo,
		HMfilterDropdown
	},
	data() {
		return {
			storeInfo: {},
			triggered: false,
			_freshing: false,
			goodsList: [],
			filterData: [
				{
					name: '选择分类',
					submenu: [],
					type: 'hierarchy'
				},
				{
					name: '商品价格',
					submenu: [
						{
							name: '默认',
							value: '1'
						},
												{
							name: '从低到高',
							value: '3'
						},
						{
							name: '从高到低',
							value: '4'
						}
					],
					type: 'hierarchy'
				}
			],
			defaultSelected: [],
			classification: [],
			priceorder: [],
			domainPrefix: ''
		}
	},
	onLoad(opt) {
		this.domainPrefix = opt.domainPrefix || ''
		this.getData()
		this.getGoodsList()
		this.menuFiltering()
	},
	methods: {
		getData() {
			getStoreInfo({
				domainPrefix: this.domainPrefix
			}).then(res => {
				if (res.code === 200) {
					this.storeInfo = res.data
					uni.setNavigationBarTitle({
						title: res.data.storeName
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		},
		// 列表到底
		onBottom() {
			if (this.pageNo > this.maxPage) return
			this.pageNo += 1
			this.getGoodsList(this.pageNo)
		},
		onRefresh() {
			if (this._freshing) return
			this._freshing = true
			if (!this.triggered)
				//界面下拉触发，triggered可能不是true，要设为true
				this.triggered = true
			this.getGoodsList()
		},
		// 获取店铺列表数据
		getGoodsList(pageNo = 1) {
			this.pageNo = pageNo
			getStoregoodList({
				pageNo,
				domainPrefix: this.domainPrefix,
				pageSize: 10,
				storeClassifyId1: this.classification[0],
				storeClassifyId2: this.classification[1],
				storeClassifyId3: this.classification[2],
				orderBy: this.priceorder[0]
			}).then(res => {
				this.triggered = false //触发onRestore，并关闭刷新图标
				this._freshing = false
				if (res.code === 200) {
					const data = res.data.records
					if (pageNo !== 1) {
						this.goodsList.concat(data)
					} else {
						this.goodsList = data
						this.maxPage = Math.ceil(res.data.total / 10)
					}
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		},
		// 筛选菜单
		menuFiltering() {
			getMenuFilterList({
				domainPrefix: this.domainPrefix
			}).then(res => {
				if (res.code === 200) {
					const func = data =>
						data.map(current => {
							if (
								current.childrenList &&
								current.childrenList.length
							) {
								return {
									name: current.categoryName,
									submenu: func(current.childrenList),
									value: current.id
								}
							} else {
								return {
									name: current.categoryName,
									submenu: [],
									value: current.id
								}
							}
						})
						const www = func(res.data)
						www.unshift({
							name: '全部商品',
							submenu: [],
							type: 'hierarchy'
						})
					this.filterData[0].submenu = www
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
			})
		},
		changeSelected() {
			this.defaultSelected = []
			this.$nextTick(() => {
				this.defaultSelected = [
					[1, 1, 0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
					[null, null] //第1个菜单选中 都不选中
				]
			})
		},
		//接收菜单结果
		confirm(e) {
			this.classification = e.value[0]
			this.priceorder = e.value[1]
			this.getGoodsList()
		}
	}
}
</script>

<style lang="scss" scoped>
// 仅出现在 ** 平台下的代码
/* #ifdef APP-PLUS || MP-WEIXIN */
$bodyHeight: calc(100vh - 228rpx);
/* #endif */

/* #ifdef H5 */
$bodyHeight: calc(100vh - 228rpx - var(--status-bar-height) - 50px);
/* #endif */
.store_home_com {
	.stoer_top {
		height: 228rpx;
	}
	.sort_bottom {
		height: $bodyHeight;
	}
}
</style>
